<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="utf-8"/>
    <title>media features width_CSS参考手册_web前端开发参考手册系列</title>
    <meta content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" name="author"/>
    <style>
        body {
            background-color: blue;
        }

        /* 超小设备 (手机, 600px 以下屏幕设备) */
        @media only screen and (max-width: 600px) {

            body {
                background: red;
            }

            .ad::after {
                content: '超小设备 (手机, 600px 以下屏幕设备) ';
            }
        }

        /* 小设备 (平板电脑和大型手机，600 像素及以上) */
        @media only screen and (min-width: 600px) {
            body {
                background: green;
            }

            .ad::after {
                content: '小设备 (平板电脑和大型手机，600 像素及以上)';
            }
        }

        /* 中型设备（平板电脑，768 像素及以上） */
        @media only screen and (min-width: 768px) {
            body {
                background: blue;
            }

            .ad::after {
                content: '中型设备（平板电脑，768 像素及以上）';
            }
        }

        /* 大型设备（笔记本电脑/台式机，992 像素及以上） */
        @media only screen and (min-width: 992px) {
            body {
                background: orange;
            }

            .ad::after {
                content: '大型设备（笔记本电脑/台式机，992 像素及以上）';
            }
        }

        /* 超大型设备（大型笔记本电脑和台式机，1200 像素及以上） */
        @media only screen and (min-width: 1200px) {
            body {
                background: pink;
            }

            .ad::after {
                content: '超大型设备（大型笔记本电脑和台式机，1200 像素及以上）';
            }
        }

    </style>
</head>
<body>
<div class="test">sddd</div>
<p class="ad">www</p>
</body>
</html>

